{% extends 'templates/users/personal.html' %}
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>修改密码</title>

    {% block headjs %}
    <script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
    <script type="text/javascript" src="{% static 'js/md5-min.js' %}"></script>
    {% endblock %}
</head>
{% block main %}
    <div class="title">修改密码</div>
    <form action="/modify_password/" style="width: 600px;margin-left: 200px" method="post" onsubmit="return TJ();">
        {% csrf_token %}
            <div style="width:600px;padding-bottom: 30px;padding-top: 30px">
            <label style="font-size: 20px">密码</label>

                <input type="password" name="opassword" id="opassword" placeholder="请输入密码" autocomplete="off"
                style="width:200px ;height: 30px;margin-left: 88px">
                <span style="color:red;" id="aSpan"></span>

        </div>
        <div style="width:600px;padding-bottom: 30px;padding-top: 30px">
            <label style="font-size: 20px">确认密码</label>

                <input type="password" name="spassword" id="spassword" placeholder="请输入密码" autocomplete="off"
                style="width:200px ;height: 30px;margin-left: 50px">
                <span style="color:red;margin-top: 50px" id="bSpan"></span>
        </div>
        <div style="width:600px;padding-bottom: 30px;padding-top: 30px">
            <label style="font-size: 20px" >邮箱：<label id="email">{{ email.email }}</label></label>
               <div style="padding-top: 30px">
                <input type="text" id="code" name="code" placeholder="请输入验证码" autocomplete="off"
                style="width:200px ;height: 30px;margin-left: 30px">
                   <a class="yz" href="javascript:;" onclick="EmailCode()">发送验证码</a>

               </div>  <span style="color:red;" id="cSpan"></span>
        </div>
<div id="myPopup" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; padding:20px; border:1px solid #ccc; z-index:1000;">
    <span style="color:red;" id="dSpan"></span>
</div>
    <button style="width: 100px;height: 45px;margin-top:40px;margin-left: 180px;">确认修改</button>
    </form>
{% endblock %}
{% block footjs %}
    <script>
    function TJ(){
        //获取输入框的值
        var opassword = $('#opassword').val();
        var spassword = $('#spassword').val();
        var code = $('#code').val();
        var email = $('#email').text();

        if (opassword.length < 6) {
           $('#aSpan').html('密码不能为空或小于六位');
           return false;
        }
        if (spassword.length < 6) {
           $('#bSpan').html('密码不能为空或小于六位');
           return false;
        }
        if (opassword!==spassword){
            $('#dSpan').html("两次输入的密码不一致")
            showPopup()
            return false
        }
        if (code.length < 1){
            $('#cSpan').html('请填写验证码');
           return false;
        }
        if (checkEcode(code,email)){
             alert("yanm")
            return false

            }
    }

    function EmailCode() {
             var email = $('#email').text();
            $.ajax({
                url: "/email_code/",
                type: "GET",
                data: 'e=' + email,//1503084051@qq.com
                dataType: 'json',
                async: false,
                success: function (response) {
                    if (response.message) {
                        $('#dSpan').html('验证码发送成功'); // 显示后端返回的消息
                        showPopup()
                    }
                },
                error: function (xhr, status, error) {
                    // 处理错误响应
                    alert('删除失败：' + xhr.responseText);
                }
            })

        }
    function checkEcode(code,email) {
            var flag = false
            //返回Ture，表示这个用户名已经存在
            $.ajax({
                url: '/checkEcode/',
                type: 'GET',
                async: false, //false表示同步请求，ture表示异步
                data: {
                    "code": code,
                    "email":email,
                },
                success: function (result) {
                    var flag2 = result.flag;
                    if (flag2) {
                        flag = true;
                        $('#cSpan').html('验证码不正确');
                    }
                }

            })
            return flag
        }
    function showPopup() {
        // 显示弹窗
        $('#myPopup').show();

        // 设置延时2秒后隐藏弹窗
        setTimeout(function(){
            $('#myPopup').hide();
        }, 2000); // 2000毫秒 = 2秒
    }
    </script>

{% endblock %}